<template>
  <div class="all">
		<div class="swiper-container">
			<ul class="swiper-wrapper">
                <li class="swiper-slide" v-for="(value,index) in people_msg"><img :src="value.src"/></li>
			</ul>
			<div class="swiper-button-prev"></div>
			<div class="swiper-button-next"></div>
			<router-link class="nav_tiao" to="../design"><img src="http://file.zoomyoung.cn/web/img/ui/tiao.png"/></router-link>
      <div class="nav_sex"><img src="http://file.zoomyoung.cn/web/img/ui/nan.png"/></div>
		</div>
		<div class="nav">
                <div class="nav_position">
                   <ul>
                     <li v-for="(value,index) in small_nav"><img :src="value.src" :class="value.nav_class" @click="setSelect(index)"/></li>
                   </ul>
                </div>
        </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
export default {
  name: 'tt1',
  data () {
    return {
      people_msg: [],
       small_nav:[],
       swiper:'',
       price:{total:'',clothes_price:'',up_price:'',down_price:''}
    }
  },
  mounted(){
  	 let _this = this
      //获取design传过来的code 来获取合成的图片
      this.$http.get('http://zoomyoung.cn/api/design/get-build-by-code',{
        params:{code:_this.$route.query.code}
     }).then(function(res){  
      //获取衣服的价格   用来传过去information页面
         _this.price.total=res.data.data.price;
         _this.price.clothes_price=res.data.data.clothes_price;
         _this.price.up_price=res.data.data.up_price;
         _this.price.down_price=res.data.data.down_price;
         _this.$store.dispatch('getPrice',_this.price);
          //获取衣服的展示图
         for(var i=0;i<res.data.data.imgs.length;i++)
         {
          _this.people_msg.push({src:res.data.data.imgs[i].img_url})
          _this.small_nav.push({src:res.data.data.imgs[i].thumb_img_url,nav_class:{select:false}})
         }
         _this.small_nav[0].nav_class.select=true  //把导航条的第一个class设为select
      }).catch(function(err){  
      console.log(err)  
      }) 

  },
  methods:{
  	setSelect(index){
       for(var i=0;i<this.small_nav.length;i++)
       {
       	this.small_nav[i].nav_class.select=false;
       }
       this.swiper.slideTo(index,500,false);
       this.small_nav[index].nav_class.select=true;
  	},
  },
 watch:{
    people_msg:function(){
      this.$nextTick(function(){     //用于监听people-msg的数据是否在v-for中全部渲染了
        let _this = this
        _this.swiper=new Swiper('.swiper-container', {
        direction: 'horizontal',
        loop: false,
        roundLengths : true,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
        observer:true,//修改swiper自己或子元素时，自动初始化swiper
        observeParents:true,//修改swiper的父元素时，自动初始化swiper
        },
        on:{
        slideChangeTransitionStart: function(event){
          for(var i=0;i<_this.small_nav.length;i++)
          {
          _this.small_nav[i].nav_class.select=false;
          }
          _this.small_nav[_this.swiper.activeIndex].nav_class.select=true;
          }
         }
        });
      })
    }
  }
}
</script>

<style scoped>
@import 'swiper/dist/css/swiper.css';
.all{width: 100%;background:black;}
.swiper-container{width: 100%;height: 750px;background-image: url('http://file.zoomyoung.cn/web/img/background.jpg');background-size: 100%;background-repeat: no-repeat;position: relative;}
.swiper-container ul{width:100%;height: 100%;}
.swiper-container ul li{width: 100%;}
.swiper-container ul li img{width: 77.3%;margin-left: 13%}
.swiper-button-next{background-image: url('http://file.zoomyoung.cn/web/img/ui/right.png');background-size: 100%;width: 13.3%;}
.swiper-button-prev{background-image: url('http://file.zoomyoung.cn/web/img/ui/left.png');background-size: 100%;width: 13.3%;}
.nav_tiao{position: absolute;width: 17.7%;left: 2.7%;top: 30px;display: block;z-index: 99}
.nav_tiao img{width: 100%}

.nav_sex{position: absolute;width: 17.7%;right: 2.7%;top: 30px;z-index: 99}
.nav_sex img{width: 100%}
.nav{width: 100%;background-image: url('http://file.zoomyoung.cn/web/img/navBack.png');background-repeat: no-repeat;}
.nav_position{width: 100%;}
.nav_position ul{width: 70%;display: flex;margin-left: 15%;justify-content: space-between;}
.nav ul li{margin-top: 10px;width: 23.5%}
.nav_position ul li img{width: 100%}
.nav ul li img.select{border:4px solid ;border-image:-webkit-linear-gradient(top left,#E716C4 ,#7403FF ) 10 10;margin-left: -4px;margin-top: -4px;}
</style>